<template>
  <div class="risk">
    <van-search class="info_search" v-model="value" placeholder="搜索" />
    <van-list
      style="padding: 0 10px"
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-checkbox-group
        ref="checkboxGroup"
        @change="handleChange"
        v-model="result"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          :border="false"
          class="mb-10"
        >
          <div class="risk_item_radio">
            <div style="width: 90%" @click="_goTaskDetail(item)">
              <div class="mb-10 hidden-danger-desc">
                {{ index + 1 }}、{{ item.HiddenDangerDesc }}
              </div>

              <van-row class="dep_sort mb-10">
                <van-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                    alt=""
                  />所属任务：{{ item.CheckTaskName }}</van-col
                >
              </van-row>
              <van-row class="dep_sort mb-10">
                <van-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_area.png"
                    alt=""
                  />{{ item.HiddenDangerArea }}</van-col
                >
              </van-row>
              <van-row gutter="20" class="dep_sort">
                <van-col span="10">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                    alt=""
                  />{{ item.CreateChnName }}</van-col
                >
                <van-col span="14">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                    alt=""
                  />{{ item.CreateDate | formatDateTime }}</van-col
                >
              </van-row>
            </div>
            <van-checkbox :name="item.CTCode" :border="false"></van-checkbox>
          </div>
        </div>
      </van-checkbox-group>
    </van-list>
    <div class="choose_btm">
      <div class="choose_cancel">
        <van-button class="mr-10" type="warning" size="small" @click="checkAll"
          >全选</van-button
        >
        <van-button class="mr-10" type="warning" @click="toggleAll" size="small"
          >取消全选</van-button
        >
        <div>已选择{{ result.length }}人</div>
      </div>
      <div class="choose_confirm">
        <van-button type="info" @click="submit">生成</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getHiddenDangerPageData } from "@/api/sytech/sytechDangerCheckreport";
export default {
  data() {
    return {
      list: [],
      result: [],
      loading: false,
      finished: false,
      type: this.$route.query.type,
      reportType: this.$route.query.reportType,

      filter: {
        dataType: "ReportTaskDetail",
        page: 0,
      },
      activeNames: ["1"],
      border: false,
      value: "",
      radio: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleChange(ids) {
      console.log(this.result, "asas");
    },

    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(false);
    },

    submit() {
      if (this.result.length > 0) {
        this.$router.push({
          name: "Reportdetail",
          query: {
            codes: this.result.join(","),
            type: this.type,
            reportType: this.reportType,
          },
        });
      } else {
        Toast.success("请先选择要生成报告的任务");
      }
    },
    // 任务详情()
    _goTaskDetail(item) {
      this.$router.push("/SytechDangerCheckDetailView?id=" + item.ID);
    },
    getList() {
      this.loading = true;
      getHiddenDangerPageData(this.filter)
        .then((res) => {
          this.loading = false;
          if (!res.data.HasNextPage) {
            this.finished = true;
          }
          this.list = res.data.Data;
          this.filter.page = res.data.PageIndex;
        })
        .catch((err) => {
          this.finished = true;
        });
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
      getHiddenDangerPageData(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.list = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    // 文件页面
    goFile() {
      // this.$router.push('/CommonInfo/InfoDetail')
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("");
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  background-color: #e8f1f8;

  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.risk_item_radio {
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8f1f8;
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
.hidden-danger-desc {
  font-size: 15px;
  line-height: 1.2;
}
.dep_sort_name {
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  font-size: 14px;
}
.dep_sort {
  font-size: 12px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    vertical-align: middle;
  }
}
</style>
